<!-- Nsoki71FgIH83lpR3uFBET9PaAOdipTR -->
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #container,
        #root {
            height: 100%;
            width: 100%;
        }

        #driving_way {
            position: fixed;
            top: 10px;
            right: 20px;
            width: 270px;
            height: 450px;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
            padding: 10px
        }

        #result {
            height: 400px;
            overflow-y: auto;
        }
    </style>
    <script src="../../Vue全家桶_stu/03_依赖包/vue.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Nsoki71FgIH83lpR3uFBET9PaAOdipTR"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>

<body>
    <div id="root">
        <div id="container"></div>
        <div id="driving_way">
            <input type="text" v-model="qishi" style="width:60px;">
            <input type="text" v-model="jieshu" style="width:60px;">
            <select v-model="select">
                <option value="0">推荐方案</option>
                <option value="1">最少时间</option>
                <option value="2">最少换乘</option>
                <option value="3">最少步行</option>
                <option value="4">不乘地铁</option>
                <option value='5'>优先地铁</option>
            </select>
            <button id='search' @click="search">查询</button>
            <p id='result'></p>
        </div>
    </div>
    <script>
        var routePolicy = [BMAP_TRANSIT_POLICY_RECOMMEND, BMAP_TRANSIT_POLICY_LEAST_TIME, BMAP_TRANSIT_POLICY_LEAST_TRANSFER, BMAP_TRANSIT_POLICY_LEAST_WALKING, BMAP_TRANSIT_POLICY_AVOID_SUBWAYS, BMAP_TRANSIT_POLICY_FIRST_SUBWAYS];
        var transit = new BMapGL.TransitRoute(map, {
            renderOptions: { map: map, panel: 'result' },
            policy: 0,

        });
        const vm = new Vue({
            el: '#root',
            data: {
                qishi: '',
                jieshu: '',
                qishizuobiao: new BMapGL.Point(116.302, 40.050),
                jieshuzuobiao: new BMapGL.Point(116.358, 39.961),
                select: '0'
            },
            methods: {
                search() {
                    map.clearOverlays();
                    var i = this.select;
                    search(this.qishizuobiao, this.jieshuzuobiao, routePolicy[i]);
                    function search(start, end, route) {
                        transit.setPolicy(route);
                        transit.search(this.qishizuobiao, this.jieshuzuobiao);
                    }
                }
            },
            watch: {

            }
        })
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setHeading(64.5);   //设置地图旋转角度
        map.setTilt(73);       //设置地图的倾斜角度
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);
        // var start = new BMapGL.Point(116.302, 40.050)    //"百度大厦";
        // var end = new BMapGL.Point(116.358, 39.961);     //"北京邮电大学西门";
        // var start = vm.qishi
        // var end = vm.jieshu

    </script>

</body>

</html>